<template>
	<div class="box">
		<h3>vxe-table</h3>
		<Form :model='data1' ref="tableForm">
			<vxe-table :data="data1"
				:edit-config="{trigger: 'click', mode: 'row',showIcon:true}"
				:show-overflow="true"
				:edit-rules="editRules"
				:scroll-x="{enabled: true}" :scroll-y="{enabled: true}" height="600">
				<vxe-table-column type="seq" width='80' title="序号"></vxe-table-column>
				<vxe-table-column field="name" width='100' title="Name"></vxe-table-column>
				<vxe-table-column field="age" width='100' title="Age"></vxe-table-column>
				<vxe-table-column field="sex" width='100' title="Sex"></vxe-table-column>
				<vxe-table-column field="university" width='150' title="University"
					:edit-render="{name:'input'}"
				></vxe-table-column>
				<vxe-table-column field="major" width='150' title="Major"
					:edit-render="{name:'input'}"
				></vxe-table-column>
				<vxe-table-column field="company" width='150' title="Company"
					:edit-render="{name:'input'}"
				></vxe-table-column>
				<vxe-table-column field="department" width='150' title="Department"
					:edit-render="{name:'input'}"
				>
					
				</vxe-table-column>
				<vxe-table-column
					field="address"
					width='150'
					title="Address"
					:edit-render="{}"
				>
					<template v-slot:edit="{ row }">
						<FormItem :prop="row.university" :rules = "[{ required: true, message: '请输入', trigger: 'blur' }]">
							<Input v-model="row.address" :maxlength="80" />
						</FormItem>
						
					</template>
					<template v-slot="{ row }">{{ row.address }}</template>
				</vxe-table-column>
				<vxe-table-column field="date" width='100' title="date"></vxe-table-column>
			</vxe-table>
		</Form>
		<div class="page">
			<span>共{{data1.length}}条</span>
		</div>
		<div class="footer">
			<Button type="primary" @click="save">保存</Button>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				data1: [],
				editRules:{
					university: [{required: true, message: '请输入'}],
					address: [{required: true, message: '请输入'}]
				}
			};
		},
		created() {
			
		},
		mounted() {
			this.createData(1000)
			var _per=window.performance;
			function getmb(size){
					return Math.floor(size/1024/1024,4)+'mb';
			};
			function getsec(time){
					return time/1000+'s';
			};
			console.log("内存占用："+getmb(_per.memory.usedJSHeapSize));
			console.log("TCP链接耗时："+getsec(_per.timing.connectEnd-_per.timing.connectStart));
			console.log("响应耗时"+getsec(_per.timing.responseEnd-_per.timing.responseStart));
			window.onload=function(){
				console.clear()
				console.log("dom渲染耗时："+getsec(_per.timing.domComplete-_per.timing.domLoading));
			}
		},
		methods: {
			createData(len) {
				const temp = {
					name: 'John Brown',
					age: 18,
					sex: '男',
					university: '北京大学',
					major: '软件工程',
					company: '华润数科',
					department: '软件研发部',
					address: 'New York No. 1 Lake Park',
					date: '2016-10-03'
				}
				let arr=new Array(len);
				for(let i=0;i<arr.length;i++) {
					const obj = Object.assign({},temp);
					obj.age = Math.ceil(Math.random()*100);
					const date = new Date(1667266389067*Math.random());
					obj.date = date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate();
					arr[i] = obj;
				}
				this.data1 = arr;
			},
			renderHeader(h,lebel) {
				return h('div',[
					h('b',{
						style: {
							color: 'red'
						}
					},'*'),
					h('span',lebel),
				]);
			},
			save() {
				let that = this;
				this.$refs.tableForm.validate(res => {
					debugger
					that.data1;
				})
			}
			
		},
	};
</script>
<style lang="less" scoped>
	.box {
		// /deep/td>div {
		// 	height: 80px;
		// 	line-height: 80px;
		// }
		.page{
			margin: 20px 0;
			text-align: right;
		}
		.footer {
			text-align: center;
		}
	}
</style>
